<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: shuan
  Date: 2016/11/15
  Time: 15:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../include/head.jsp">
    <jsp:param name="title" value="监控仪表板"/>
</jsp:include>

<jsp:include page="../include/admin_header.jsp"/>

<jsp:include page="../include/admin_sidebar.jsp"/>

<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <h4 class="page-title" style="display: inline-block;">监控仪表板</h4>
        <div style="float: right;margin-right: 40px;">
            <div class="sie-calendar-parent">
                <input type="text" readonly="readonly" class="form-control sie-calendar-input datepicker" id="indexTopTime" style="width:100%;margin:1%;max-width: 120px;padding: 5px;">
                <img src="/images/calendar.png" class="sie-calendar-img">
            </div>
        </div>
    </section>
    <input type="text" id="tenantId" hidden>
    <input type="text" id="deviceId" hidden>

    <div class="content-header">
        <div style="width: 100%;border:1px solid #cdd9e1;background-color: #fff;padding-bottom: 20px;">
            <div style="margin-top: 30px;border-left: 10px solid #41aaaa">
                <p style="margin-left: 5px;line-height: 1.11;font-size: 18px;color: #575757">性能参数Top10排名</p>
            </div>
            <div class="row" style="color: #fff;">
                <div class="col-md-3">
                    <div style="width: 100%;background-color: #50bed7;height:50px;text-align: center;line-height:3.4;">
                        <scan style="line-height: 1;margin-right: 20px;">
                            <spring:message code="label.rank.oee"/>
                        </scan>
                        <i style="line-height: 1;"><spring:message code="label.rank.positive.sequence"/></i>
                    </div>
                    <div id="oeeTopAsc" class="indexTop sie-dash-p">
                    </div>
                </div>
                <div class="col-md-3">
                    <div style="width: 100%;background-color: #50bed7;height:50px;text-align: center;line-height:3.4;">
                        <scan style="line-height: 1;margin-right: 20px;">
                            <spring:message code="label.rank.availability"/>
                        </scan>
                        <i style="line-height: 1;"><spring:message code="label.rank.positive.sequence"/></i>
                    </div>
                    <div id="availabilityTopAsc" class="indexTop sie-dash-p">
                        <div class="row" hidden="hidden" style="margin-right: 0;margin-left: 0;">
                            <div class="col-md-1 col-sm-1" style="padding-right: 0;padding-left: 0;height: 30px;">1.</div>
                            <div class="col-md-4 col-sm-4" style="padding-right: 0;padding-left: 0;height: 30px;">siemens</div>
                            <div class="col-md-4 col-sm-4" style="padding-right: 0;padding-left: 0;height: 30px;">MT000001</div>
                            <div class="col-md-3 col-sm-3" style="padding-right: 0;padding-left: 0;height: 30px;">130%</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div style="width: 100%;background-color: #50bed7;height:50px;text-align: center;line-height:3.4;">
                        <scan style="line-height: 1;margin-right: 20px;">
                            <spring:message code="label.rank.performance"/>
                        </scan>
                        <i style="line-height: 1;"><spring:message code="label.rank.positive.sequence"/></i>
                    </div>
                    <div id="performanceTopAsc" class="indexTop sie-dash-p">
                    </div>
                </div>
                <div class="col-md-3">
                    <div style="width: 100%;background-color: #50bed7;height:50px;text-align: center;line-height:3.4;">
                        <scan style="line-height: 1;margin-right: 20px;">
                            <spring:message code="label.rank.quality"/>
                        </scan>
                        <i style="line-height: 1;"><spring:message code="label.rank.positive.sequence"/></i>
                    </div>
                    <div id="qualityTopAsc" class="indexTop sie-dash-p">
                    </div>
                </div>
            </div>
            <div class="row" style="color: #fff;margin-top: 10px;">
                <div class="col-md-3">
                    <div style="width: 100%;background-color: #50bed7;height:50px;text-align: center;line-height:3.4;">
                        <scan style="line-height: 1;margin-right: 20px;">
                            <spring:message code="label.rank.oee"/>
                        </scan>
                        <i style="line-height: 1;"><spring:message code="label.rank.reverse.order"/></i>
                    </div>
                    <div id="oeeTopDesc" class="indexTop sie-dash-p">
                    </div>
                </div>
                <div class="col-md-3" >
                    <div style="width: 100%;background-color: #50bed7;height:50px;text-align: center;line-height:3.4;">
                        <scan style="line-height: 1;margin-right: 20px;">
                            <spring:message code="label.rank.availability"/>
                        </scan>
                        <i style="line-height: 1;"><spring:message code="label.rank.reverse.order"/></i>
                    </div>
                    <div id="availabilityTopDesc" class="indexTop sie-dash-p">
                    </div>
                </div>
                <div class="col-md-3">
                    <div style="width: 100%;background-color: #50bed7;height:50px;text-align: center;line-height:3.4;">
                        <scan style="line-height: 1;margin-right: 20px;">
                            <spring:message code="label.rank.performance"/>
                        </scan>
                        <i style="line-height: 1;"><spring:message code="label.rank.reverse.order"/></i>
                    </div>
                    <div id="performanceTopDesc" class="indexTop sie-dash-p">
                    </div>
                </div>
                <div class="col-md-3">
                    <div style="width: 100%;background-color: #50bed7;height:50px;text-align: center;line-height:3.4;">
                        <scan style="line-height: 1;margin-right: 20px;">
                            <spring:message code="label.rank.quality"/>
                        </scan>
                        <i style="line-height: 1;"><spring:message code="label.rank.reverse.order"/></i>
                    </div>
                    <div id="qualityTopDesc" class="indexTop sie-dash-p">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="../include/foot.jsp"/>
<script>
    $(document).ready(function () {
        $("#indexTopTime").datepicker({
            language: "zh-CN",
            autoclose: true,
            format: "yyyy-mm-dd",
            endDate:dateAddSubtract(new Date(),-1),
            startDate:new Date("2016-11-01"),
            todayHighlight:true
        }).on('changeDate', function (ev) {
            getAllDeviceTop();
        });
        $("#indexTopTime").val(dateFormat(dateAddSubtract(new Date(),-1)));
        $("#indexTopTime").datepicker("update");
        bindDateInputClickEvent();
    });

    function getAllDeviceTop(){
        //获取top10
        $.ajax({
            url:"/api/v1/admin/getAllDeviceTop",
            type:"get",
            data:{
                day:$("#indexTopTime").val()
            },
            success:function(data){
                $(".indexTop").empty();
                if(data.result != "SUCCESS"){
                    return;
                }
                if(data.data.length == 0){
                    return;
                }
                $.each(data.data,function(index,top){
                    if(top.length != 0){
                        $.each(top,function(i,ranking){
                            var $row = $("<div></div>").addClass("row").append(
                                    $("<div></div>").addClass("col-md-1 col-sm-1").text(i+1+".")).append(
                                    $("<div></div>").addClass("col-md-3 col-sm-3 sie-text-overflow").text(ranking.tenant_name)).append(
                                    $("<div></div>").addClass("col-md-4 col-sm-4 sie-text-overflow").text(ranking.device_name)).append(
                                    $("<div></div>").addClass("col-md-4 col-sm-4 sie-text-overflow").text((ranking.indexValue*100).toFixed(2)+"%"));
                            $("#"+index).append($row);
                        })
                    }
                });
            }
        });
    }
</script>